<template>
    <div class="box1">
        <slotCom>
            <template v-slot:com>
                <div class="data_click_talbe">
                    <TableChild :tableHeader="tableHeader" :TableBody="TableBody" />
                </div>
            </template>
        </slotCom>
        <div style="position: absolute;top: -8%;left: 301px;">
            <div style="position: relative;">
                <el-select v-model="hasClockin" filterable @change="listClockingData" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <a @click="listClockingData"  style="position: absolute;  right: -6px;">
                    <img style=" width: 32px; height: 32px;" src="../../../assets/imgx/seel.png" alt="">
                </a>
            </div>
        </div>
        <pageChild :total="total" :pageSize="pageSize" :current="current" @currentChange="currentChange" />
    </div>
</template>
<script>
import { clocking_Table_List } from "@/api/clockingApi/index.js"
import slotCom from "@/components/SslotCom/index.vue"

export default {
    components: {
        TableChild: () => import("@/components/ComprotsTable/index.vue"),
        pageChild: () => import("@/components/pagination/index.vue"),
        slotCom
    },
    data() {
        return {
            options: [{
                value: '',
                label: '--'
            }, {
                value: '0',
                label: '未打卡'
            }, {
                value: '1',
                label: '已打卡'
            }],
            total: 0,
            pageSize: 15,
            current: 1,
            hasClockin: "",
            TableBody: [],
            tableHeader: [
                {
                    "title": "班次",
                }, {
                    "title": "打卡人",
                }, {
                    "title": "打卡状态",
                }, {
                    "title": "打卡时间",
                }
            ]
        }
    },
    mounted() {
        this.clockTable(this.hasClockin)

    },
    methods: {
        listClockingData() {
            this.clockTable(this.hasClockin)

        },
        currentChange(current) {
            this.current = current
            this.clockTable(this.hasClockin)

        },
        clockTable(item) {
            clocking_Table_List({
                hasClockin: item,
                current: this.current,
                size: this.pageSize,
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.TableBody = res.data.list;
                    this.total = Number(res.data.total);
                    this.pageSize = res.data.pageSize;
                    this.current = res.data.current;

                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.box1 {
    width: 1665px;
    height: 778px;

    padding: 11px;
}

/deep/.el-input__suffix {
    display: none;
}


.el-button--primary {
    width: 84px;
    height: 34px;
    background: #031231;
    opacity: 1;
    border: 0px solid #5B9FC3;
    color: white;
    font-size: 10px;
}
</style>